<template>
  <content-layout>
    <template #searchFold>
      <search-item label="测试测试">
        {{ store.state.common.test }}--
        <a-input v-model:value="value" placeholder="Basic usage" />
      </search-item>
      <search-item label="测试测试">
        <a-input v-model:value="value" placeholder="Basic usage" />
      </search-item>
      <search-item label="测试测试">
        <a-select v-model:value="value" placeholder="Basic usage">
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
        </a-select>
      </search-item>
      <search-item label="测试测试">
        <a-select v-model:value="value" placeholder="Basic usage">
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
        </a-select>
      </search-item>
    </template>
    <template #searchUnfold>
      <search-item label="测试测试">
        <a-input v-model:value="value" placeholder="Basic usage" />
      </search-item>
      <search-item label="测试测试">
        <a-select v-model:value="value" placeholder="Basic usage">
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
        </a-select>
      </search-item>
      <search-item label="测试测试">
        <a-select v-model:value="value" placeholder="Basic usage">
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
        </a-select>
      </search-item>
    </template>
    <template #handleBtn>
      <a-button type="primary" @click="add">添加</a-button>
      <a-button type="primary" @click="seeDetail">详情</a-button>
      <a-button type="primary" @click="add">添加</a-button>
      <a-button type="primary" @click="add">添加</a-button>
      <a-button type="primary" @click="add">添加</a-button>
    </template>
    <template v-slot:table="{ height }">
      <a-table
        :scroll="{ y: height }"
        :pagination="false"
        :data-source="dataSource"
        :columns="colums"
      ></a-table>
    </template>
    <template #pagination>
      <a-pagination :total="50" show-size-changer show-quick-jumper></a-pagination>
    </template>
  </content-layout>
  <full-screen-layout v-if="visibleDetail" title="操作详情页面" v-model:visible="visibleDetail">
    <detail-layout label-width="110px">
      <!--            <DetailItem label="测试" text="测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水"></DetailItem>-->
      <!--            <detail-item label="测试" text="测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水"></detail-item>-->
      <!--            <detail-item label="测试" text="测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水"></detail-item>-->
      <!--            <detail-item label="测试" text="测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水"></detail-item>-->
      <!--            <detail-item :span="8" label="测试数据超长" text="测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水"></detail-item>-->
      <!--            <detail-item :span="8" label="测试" text="测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水"></detail-item>-->
      <!--            <detail-item :span="8" label="测试" text="测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水"></detail-item>-->
      <detail-item
        :span="24"
        label="测试"
        text="测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水测试水水水水水水水水水水水水"
      ></detail-item>
    </detail-layout>
  </full-screen-layout>
  <dialog-layout v-model:visible="visible">
    <form-layout v-model:form-data="formState" :rules="rules">
      <a-form-item ref="name" label="Activity name" name="name">
        <a-input v-model:value="formState.name" />
      </a-form-item>
      <a-form-item
        :label-col="{ span: 7 }"
        :wrapper-col="{ span: 17 }"
        label="Activity zone"
        name="region"
      >
        <a-select v-model:value="formState.region" placeholder="please select your zone">
          <a-select-option value="shanghai">Zone one</a-select-option>
          <a-select-option value="beijing">Zone two</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="Activity time" required name="date1">
        <a-date-picker
          v-model:value="formState.date1"
          show-time
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item label="Instant delivery" name="delivery">
        <a-switch v-model:checked="formState.delivery" />
      </a-form-item>
      <a-form-item label="Activity type" name="type">
        <a-checkbox-group v-model:value="formState.type">
          <a-checkbox value="1" name="type">Online</a-checkbox>
          <a-checkbox value="2" name="type">Promotion</a-checkbox>
          <a-checkbox value="3" name="type">Offline</a-checkbox>
        </a-checkbox-group>
      </a-form-item>
      <a-form-item label="Resources" name="resource">
        <a-radio-group v-model:value="formState.resource">
          <a-radio value="1">Sponsor</a-radio>
          <a-radio value="2">Venue</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="Activity form" name="desc">
        <a-textarea v-model:value="formState.desc" />
      </a-form-item>
    </form-layout>
  </dialog-layout>
</template>

<script setup lang="ts">
import ContentLayout from 'lib-comp/layout/contentLayout.vue'
import { ref, reactive, toRaw, computed } from 'vue'
import { useStore } from 'vuex'
import SearchItem from 'lib-comp/formSearch/searchItem.vue'
import FullScreenLayout from 'lib-comp/layout/fullScreenLayout.vue'
import DetailLayout from 'lib-comp/detail/detailLayout.vue'
import DialogLayout from 'lib-comp/layout/dialogLayout.vue'
import FormLayout from 'lib-comp/form/formLayout.vue'
const store = useStore()
let conunt1 = computed(() => store.state.count)
let count = ref(10)
let value = ref('')
let visible = ref(false)
let visibleDetail = ref(false)
let dataSource = ref([
  {
    key: '1',
    name: '西湖区湖底公园1号',
    age: 32,
    address: '西湖区湖底公园1号'
  },
  {
    key: '2',
    name: '西湖区湖底公园1号',
    age: 42,
    address: '西湖区湖底公园1号'
  }
])
for (let i = 0; i < 10; i++) {
  dataSource.value.push({
    key: '2',
    name: '西湖区湖底公园1号',
    age: 42,
    address: '西湖区湖底公园1号'
  })
}
let colums = ref([
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address'
  }
])
let add = () => {
  visible.value = true
}
let seeDetail = () => {
  visibleDetail.value = true
}
const formRef = ref();
const formState = reactive({
  name: '',
  region: undefined,
  date1: undefined,
  delivery: false,
  type: [],
  resource: '',
  desc: ''
});
const rules = {
  name: [
    {
      required: true,
      message: 'Please input Activity name',
      trigger: 'blur'
    },
    {
      min: 3,
      max: 5,
      message: 'Length should be 3 to 5',
      trigger: 'blur'
    }
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change'
    }
  ],
  date1: [
    {
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
      type: 'object'
    }
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change'
    }
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change'
    }
  ],
  desc: [
    {
      required: true,
      message: 'Please input activity form',
      trigger: 'blur'
    }
  ]
}

const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log('values', formState, toRaw(formState));
    })
    .catch(error => {
      console.log('error', error);
    })
}

const resetForm = () => {
  formRef.value.resetFields();
}

const labelCol = {
  span: 5
}
const wrapperCol = {
  span: 19
}
</script>

<style scoped></style>